<template>
  <div class="g-btmbar">
    <div class="m-playbar" @mouseover="showMusic" @mouseleave="WatchMusic" ref="music" id="music">
      <audio :src="songUrl" ref="audio" @ended="endPlay" @play="playFunc" @pause="pauseFunc"
             @timeupdate="timeupdateFunc"
             @error="getSongUrl"
             @canplay="canplayFunc">
      </audio>
      <div class="updn">
        <div class="left">
          <a href="javascript:;" class="btn" :class="isLock?'lock':'open'"
             @click="$store.commit('setting/changeLock')"></a>
        </div>
        <div class="right"></div>
      </div>
      <div class="bg"></div>
      <div class="hand" title="展开播放条"></div>
      <div class="wrap" style="margin-left: -498.5px;">
        <div class="btns">
          <a href="javascript:;" title="上一首" class="pre" @click="pre"></a>
          <a href="javascript:;" title="播放/暂停" class="play" @click="play()" ref="play" v-if="PlayOrPause"></a>
          <a href="javascript:;" title="播放/暂停" class="pause" @click="pause()" ref="pause" v-if="!PlayOrPause"></a>
          <a href="javascript:;" title="下一首" class="nex" @click="nex"></a>
        </div>
        <div class="head">
          <img :src="song.al.picUrl" alt="" v-if="song.al">
          <img :src="song.album.picUrl" alt="" v-else-if="song.album">
          <img :src="song.coverUrl" alt="" v-else-if="song.coverUrl">
          <img src="../../assets/default_album.jpg" alt="" v-else>
          <router-link :to="{name:'SongDetail',params:{id:song.id}}" class="mask"></router-link>
        </div>
        <div class="play">
          <div class="words">
            <router-link :to="{name:'SongDetail',params:{id:song.id}}" class="name" :title="song.name" v-if="song">
              {{ song.name }}
            </router-link>
            <a @click.prevent="toMv(song.mv)" class="mv" title="MV" v-if="song.mv"></a>
            <span class="f-thide">
              <span class="singer" v-if="song">
                <router-link v-for="(i,u) in song.ar" :key="u" :title="i.name"
                             :to="{name:'Work',params:{id:i.id}}">
                  {{ i.name }}
                  <span v-if="!u==song.ar.length-1">/</span>
                </router-link>
             </span>
            </span>
            <a href="#" class="src" title="来自听歌排行榜" v-if="song.id"></a>

          </div>

          <div class="m-pbar">
            <el-slider v-model="value1"
                       style="margin-top: -15px;"
                       :show-tooltip="false"
                       @change="setProcessFunc"
                       @mousedown.native="isDraging=true"
                       @mouseup.native="isDraging=false"
                       :format-tooltip="formatTooltip"
            ></el-slider>

            <span class="time" v-if="song.id">
              <em>{{ nowTime }}</em>
              / {{ voiceDuration(song.dt) || voiceDuration(song.duration) }}
            </span>
            <span class="time" v-else>
              <em>00:00</em>
              / 00:00
            </span>
          </div>
        </div>
        <div class="oper">
          <a href="javascript:;" title="画中画歌词" class="icn-cp icn">画中画歌词</a>
          <a href="javascript:;" title="收藏" class="like icn">收藏</a>
          <a href="javascript:;" title="分享" class="share icn">分享</a>
        </div>
        <div class="ctrl">
          <div class="m-mol" v-show="showVol">
            <div class="barbg"></div>
            <div class="bvg">
              <div class="curr" style=" height: 40.1852px;"></div>
              <span class="f-apha" style="top: 46px"></span>
            </div>
          </div>
          <a href="javascript:;" class="icn-vol" @click.prevent="showVol=!showVol"></a>

          <a class="loop1 icn-loop" v-show="mode==1" title="循环播放" @click="$store.commit('setting/changeMode',2)"></a>
          <a class="loop2 icn-loop" v-show="mode==2" title="随机播放" @click="$store.commit('setting/changeMode',3)"></a>
          <a class="loop3 icn-loop" v-show="mode==3" title="单曲循环" @click="$store.commit('setting/changeMode',1)"></a>

          <span class="add">
            <span class="tip" style="display: none;">已添加到播放列表</span>
            <a href="javascript:;" title="播放列表" class="icn-list" @click.prevent="showPlay=!showPlay"
               v-if="musics">{{ musics.length }}</a>
          </span>
          <div class="tip-1" style="display: none;">循环</div>
        </div>
      </div>
      <div class="playlist" ref="playlist" v-show="showPlay">
        <div class="list">
          <div class="listhd">
            <div class="listhdc">
              <h4 v-if="musics">
                播放列表({{ musics.length }})
              </h4>
              <h4 v-else>
                播放列表(0)
              </h4>
              <a class="addal">
                <span class="ion-add"></span>
                收藏全部
              </a>
              <span class="line"></span>
              <a class="clear underline" @click.prevent="removeAllMusic()">
                <span class="icon"></span>
                清除
              </a>
              <p class="tit" v-if="song">{{ song.name }}</p>
              <span class="close" @click="showPlay=false"></span>
            </div>
          </div>
          <div class="listbd">
            <div class="cvr"></div>
            <div class="listbdc">
              <ul class="clearfix" v-if="musics">
                <li v-for="(item,index) in musics" :key="index">
                  <div class="col col1">
                    <div :class="song.id==item.id?'playicn':''"></div>
                  </div>
                  <div class="col col2" :title="item.name" @click="sentSongUrl(item)">
                    {{ item.name }}
                  </div>
                  <div class="col col3">
                    <div class="icns">
                      <i class="del" title="删除"></i>
                      <i class="download" title="下载"></i>
                      <i class="share" title="分享"></i>
                      <i class="add" title="收藏"></i>
                    </div>
                  </div>
                  <div class="col col4">
                    <span v-if="item">
                      <router-link :title="i.name" class="underline art" :to="{name:'Work',params:{id:i.id}}"
                                   v-for="(i,h) in item.ar" :key="h">{{ i.name }}
                       <span v-if="!h==item.ar.length-1">&nbsp;/&nbsp;</span>
                      </router-link>

                    </span>

                  </div>
                  <div class="col col5">{{ voiceDuration(item.dt) }}</div>

                  <div class="col col6">
                    <a title="来自歌手"></a>
                  </div>
                </li>
              </ul>
            </div>
            <div class="nocnt" v-if="$store.state.track.songList.length==0" ref="nocnt">
              <i class="ico"></i>
              <span>你还没有添加任何歌曲</span>
              <br>
              <span>去首页<a @click.prevent="toHome">发现音乐</a>，或在<a @click.prevent="toMy">我的音乐</a>收听自己收藏的歌单</span>
            </div>
            <div class="bline"></div>
            <div class="lyric-wrapper" ref="lyric">
              <div class="lyric" ref="lyriclist">
                <p v-for="(text,o) in songLyric" :key="o" :class="lyricIndex==o?'active':''">
                  {{ text.lyric }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {voiceDuration} from "@/utils/voiceDuration";
import {reqSongUrl} from "@/http/api";
import {mapState} from "vuex";

export default {
  name: "index",
  data() {
    return {
      isDraging: false,
      isError: false,
      timer: null,
      totalTimes: '',
      voiceDuration: voiceDuration,
      showVol: false,
      showPlay: false,
      songLyric: [],
      PlayOrPause: true,
      lyricIndex: 0,
      timers: null,
      loop: 1,
      timer2: null,
      // 总时长
      duration: null,
      // 现在的时长
      nowTime: '00:00',
      width: 0,
      songUrl: '',
      musicIndex: -1,
      audio: '',
      value1: 0,
    }
  },
  watch: {
    lyricIndex(newVal) {
      this.$refs.lyric.scrollTop = 32 * (this.lyricIndex - 3)
    },
    width(newVal) {
      this.width = newVal
    },
    song: {
      handler(newVal, oldVal) {
        this.getSongUrl()
        this.getSongLyric()
        setTimeout(() => {
          for (let i = 0; i < this.$store.state.track.songList.length; i++) {
            if (this.$store.state.track.songList[i].id == this.$store.state.track.song.id) {
              this.musicIndex = i;
              break;
            }
          }
          this.play()
        }, 500)
      }
    },
  },
  computed: {
    mode() {
      return this.$store.state.setting.mode
    },
    isLock() {
      return this.$store.state.setting.lock
    },
    ...mapState('track', ['song']),
    musics() {
      return this.$store.state.track.songList
    }
  },
  methods: {
    timeupdateFunc(e) {
      if (!this.isDraging) {
        this.value1 = (e.target.currentTime) / this.totalTimes * 100
      }
    },
    setProcessFunc(val) {
      this.nowTime = this.voiceDuration(Math.round(val / 100 * this.audio.duration * 1000))
      this.audio.currentTime = Math.round(val / 100 * this.audio.duration)
      this.isDraging = false
    },
    canplayFunc(e) {
      this.isError = false;
      this.totalTimes = e.target.duration;
      this.audio.volume = 0.5;
    },
    playFunc(e) {
      this.PlayOrPause = false
    },
    pauseFunc(e) {
      this.PlayOrPause = true
    },
    formatTooltip(val) {
      if (val == 0 || val == null) return
      this.nowTime = this.voiceDuration(Math.round(val / 100 * this.audio.duration * 1000))
    },
    toMv(id) {
      this.$router.push({name: 'MvDetail', query: {id: id}})
      this.showPlay = false
    },
    toMy() {
      this.$router.push({name: 'MyMusic'})
      this.showPlay = false
    },
    toHome() {
      this.$router.push({name: 'Home'})
      this.showPlay = false
    },
    endPlay() {
      this.lyricIndex = -1
      this.width = 0
      this.nowTime = '00:00'
      if (this.mode == 3) {
        this.audio.load()
        this.audio.play()
      } else {
        this.cancelLyricIndex()
        this.$refs.lyric.scrollTop
        this.nex()
      }
    },
    async getSongUrl() {
      let result = await reqSongUrl(this.$store.state.track.song.id)
      if (result.data.code == 200) {
        this.songUrl = result.data.data[0].url
      }
      this.audio = this.$refs.audio;
    },
    pre() {
      this.pause()
      let list = this.musics
      if (list.length == 0) return
      let index = this.musicIndex - 1;
      if (index == -1) index = this.$store.state.track.songList.length - 1
      if (this.mode == 1) {
        this.$store.commit('track/setNowSong', list[index])
      } else if (this.mode == 2) {
        index = parseInt(Math.random() * this.musics.length)
        this.$store.commit('track/setNowSong', list[index])
      }
    },
    nex() {
      this.pause()
      let list = this.musics
      if (list.length == 0) return
      let index = this.musicIndex + 1;
      if (index == this.$store.state.track.songList.length) index = 0
      if (this.mode == 1) {
        this.$store.commit('track/setNowSong', list[index])
      } else if (this.mode == 2) {
        index = parseInt(Math.random() * this.musics.length)
        this.$store.commit('track/setNowSong', list[index])
      }
    },
    listenLyricIndex() {
      clearInterval(this.timers);
      this.timers = setInterval(() => {
        for (let i = 0; i < this.songLyric.length; i++) {
          if (this.songLyric[this.songLyric.length - 1].time < this.audio.currentTime) {
            this.lyricIndex = this.songLyric.length - 1;
            break;
          }
          if (this.songLyric[i].time < this.audio.currentTime && this.songLyric[i + 1]
              .time > this.audio.currentTime) {
            this.lyricIndex = i;
          }
        }
      }, 200);
    },
    cancelLyricIndex() {
      clearInterval(this.timers);
    },
    removeAllMusic() {
      this.$store.commit('track/RemoveMUSICLIST')
    },
    sentSongUrl(i) {
      this.$store.commit('track/SETMUSIC', i)
    },
    async getSongLyric() {
      if (this.song.id) {
        let result = await this.$API.reqSongLyric(this.$store.state.track.song.id)
        let lyric = result.data.lrc.lyric;
        let li = [];
        let re = /\[([^\]]+)\]([^[]+)/g;
        lyric.replace(re, ($0, $1, $2) => {
          li.push({
            time: this.formatTimeToSec($1),
            lyric: $2
          });
        });
        this.songLyric = li;
      }

    },
    formatTimeToSec(time) {
      let arr = time.split(':');
      return (parseFloat(arr[0]) * 60 + parseFloat(arr[1])).toFixed(2);
    },
    pause() {
      this.cancelLyricIndex()
      clearInterval(this.timer2);
      this.PlayOrPause = true
      this.$refs.audio.pause()
    },
    play() {
      this.getSongUrl()
      this.listenLyricIndex();
      this.PlayOrPause = false
      this.$refs.audio.play()
    },
    WatchMusic() {
      this.timer = setInterval(() => {
        if (!this.$store.state.setting.lock)
          this.$refs.music.style.top = '-7px';
        clearInterval(this.timer);
      }, 1000);
    },
    showMusic() {
      this.$refs.music.style.top = '-53px';
      clearInterval(this.timer);
    },

  },
  mounted() {
    this.WatchMusic();
    this.getSongUrl()
    this.getSongLyric()
  }
}
</script>

<style scoped lang="less">
.z-sel {
  color: #fff;
  -moz-transition: color 0.7s linear;
  -o-transition: color 0.7s linear;
}

.g-btmbar {
  position: fixed;
  _position: absolute;
  zoom: 1;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  width: 101%;
  z-index: 1002;

  .m-playbar {
    transition: 0.5s all;
    visibility: visible;
    position: absolute;
    zoom: 1;
    top: -53px;
    left: 0;
    width: 100%;
    height: 53px;
    margin: 0 auto;

    .updn {
      position: relative;
      z-index: 11;

      .left {
        position: absolute;
        top: -14px;
        right: 15px;
        width: 52px;
        height: 67px;
        background-position: 0 -380px;
        background-image: url("../../assets/playbar.png");

        .lock {

          background-position: -100px -380px;
        }

        .open {
          background-position: -80px -380px;
        }

        .btn {
          display: block;
          width: 18px;
          height: 18px;
          margin: 6px 0 0 17px;
          background-image: url("../../assets/playbar.png");
        }
      }

      .right {
        position: absolute;
        top: -1px;
        right: 0;
        width: 15px;
        height: 54px;
        background-position: -52px -393px;
        pointer-events: none;
        background-image: url("../../assets/playbar.png");
      }
    }

    .bg {
      height: 53px;
      zoom: 1;
      margin-right: 67px;
      background-position: 0 0;
      background-repeat: repeat-x;
      background-image: url("../../assets/playbar.png");

    }

    .hand {
      position: absolute;
      top: -10px;
      width: 100%;
      height: 20px;
      cursor: pointer;
    }

    .playlist {
      width: 986px;
      position: absolute;
      // left: 50%;
      height: 301px;
      bottom: 47px;
      margin-left: 230px;
      overflow: hidden;

      .list {
        transition: .4s all;
        width: 100%;
        height: 100%;
        // background-color: red;
        position: absolute;

        .listhd {
          position: relative;
          height: 41px;
          padding: 0 5px;
          // background: url('../images/playlist_bg.png') repeat-x 0 0;
          width: 982px;
          background: #080707;
          margin-left: 2px;
          box-shadow: 0 0 4px 0px rgba(0, 0, 0, .8);
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;

          .listhdc {
            position: relative;
            height: 40px;

            h4 {
              position: absolute;
              left: 25px;
              top: 0;
              height: 39px;
              line-height: 39px;
              font-size: 14px;
              color: #e2e2e2;
            }

            .line {
              position: absolute;
              top: 13px;
              left: 477px;
              height: 15px;
              border-left: 1px solid #000;
              border-right: 1px solid #2c2c2c;
            }

            .addal {
              left: 398px;
              position: absolute;
              top: 12px;
              height: 15px;
              line-height: 15px;
              cursor: pointer;
              color: #ccc;

              .ion-add {
                float: left;
                margin: 1px 6px 0 0;
                width: 16px;
                background-position: -24px 0;
                height: 16px;
                background-image: url("../../assets/playlist.png");
              }
            }

            .clear {
              position: absolute;
              left: 490px;
              top: 12px;
              height: 15px;
              line-height: 15px;
              cursor: pointer;
              color: #ccc;
              display: block;

              .icon {
                width: 13px;
                height: 16px;
                display: block;
                margin: 1px 6px 0 0;
                float: left;
                background: url('../../assets/playlist.png') no-repeat;
                background-position: -51px 0;

              }

              &:hover .icon {
                background-position: -51px -20px;
              }

            }

            .tit {
              position: absolute;
              left: 595px;
              top: 0;
              width: 346px;
              text-align: center;
              height: 39px;
              line-height: 39px;
              color: #fff;
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-wrap: normal;
              font-family: Arial, Helvetica, sans-serif;

            }

            .close {
              position: absolute;
              top: 6px;
              right: 8px;
              width: 30px;
              height: 30px;
              overflow: hidden;
              text-indent: -999px;
              cursor: pointer;
              background: url('../../assets/playlist.png') no-repeat;
              background-position: -195px 9px;

              &:hover {
                background-position: -195px -21px;
              }
            }
          }
        }

        .listbd {
          position: absolute;
          left: 0;
          top: 41px;
          width: 986px;
          height: 260px;
          padding: 0 5px;
          overflow: hidden;
          background: url('../../assets/playlist_bg.png') repeat-y -1014px 0;
          // background-position: -1014px 0;
          // background-repeat: repeat-y;
          .cvr {
            position: absolute;
            left: 2px;
            z-index: 1;
            width: 980px;
            height: 100%;
            opacity: .2;
            background: #C04848; /* fallback for old browsers */
            background: -webkit-linear-gradient(to left, #480048, #C04848); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to left, #480048, #C04848); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

          }

          .listbdc {
            position: absolute;
            left: 2px;
            top: 0;
            z-index: 4;
            height: 260px;
            width: 553px;
            overflow-y: auto;
            overflow-x: hidden;

            &::-webkit-scrollbar {
              width: 6px;
              height: 8px;
            }

            &::-webkit-scrollbar-thumb {
              background-color: #868686;
              border-radius: 15px;
            }

            ul {
              width: 535px;
              height: auto;
              overflow: hidden;

              li {
                float: left;
                width: 100%;
                color: #ccc;

                .col {
                  float: left;
                  padding-left: 10px;
                  height: 28px;
                  line-height: 28px;
                  _line-height: 29px;
                  overflow: hidden;
                  cursor: pointer;
                }

                .col1 {
                  width: 10px;

                  .playicn {
                    margin-top: 8px;
                    width: 10px;
                    height: 13px;
                    background: url('../../assets/playlist.png') no-repeat;
                    background-position: -182px 0;
                  }
                }

                .col2 {
                  width: 246px;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }

                .col3 {
                  width: 78px;
                  position: relative;

                  .icns {
                    display: none;
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 100px;
                    height: 23px;

                    i {
                      display: block;
                      height: 16px;
                      float: right;
                      overflow: hidden;
                      margin: 7px 0 0 10px;
                      text-indent: -9999px;
                      background: url('../../assets/playlist.png') no-repeat;
                      width: 14px;
                    }

                    .del {
                      width: 13px;
                      background-position: -51px 0;

                      &:hover {
                        background-position: -51px -20px;
                      }
                    }

                    .download {
                      background-position: -57px -50px;

                      &:hover {
                        background-position: -80px -50px
                      }
                    }

                    .share {
                      background-position: 0 0;

                      &:hover {
                        background-position: 0 -20px;
                      }
                    }

                    .add {
                      width: 16px;
                      background-position: -24px 0;

                      &:hover {
                        background-position: -24px -20px;
                      }
                    }
                  }
                }

                .col4 {
                  width: 70px;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;

                  .art {
                    color: #ccc;

                    &:hover {
                      color: #fff;
                    }
                  }
                }

                .col5 {
                  width: 35px;
                }

                .col6 {
                  width: 37px;
                  padding-left: 6px;

                  a {
                    width: 14px;
                    height: 16px;
                    display: block;
                    margin: 7px 0 0 10px;
                    background: url('../../assets/playlist.png') no-repeat;
                    background-position: -80px 0px;

                    &:hover {
                      background-position: -80px -20px;
                    }
                  }
                }

                &:hover {
                  background-color: rgba(0, 0, 0, 0.4);

                  .col, .art {
                    color: #fff;
                  }

                  .col3 .icns {
                    display: block;
                  }
                }
              }

              .musicActive {
                background-color: rgba(0, 0, 0, 0.4);

                .col, .art {
                  color: #fff;
                }


              }
            }
          }

          .nocnt {
            width: 553px;
            position: relative;
            z-index: 999;
            padding-top: 85px;
            text-align: center;
            line-height: 43px;
            color: #aaa;

            a {
              color: #aaa;
              text-decoration: underline;
              cursor: pointer;
            }

            .ico {
              float: none;
              display: inline-block;
              position: relative;
              top: -4px;
              width: 36px;
              height: 29px;
              margin-right: 4px;
              background: url('../../assets/playlist.png') no-repeat;
              background-position: -138px 0;
              vertical-align: middle;
            }
          }

          .bline {
            position: absolute;
            left: 549px;
            top: -1px;
            z-index: 2;
            width: 6px;
            height: 260px;
            background: #000;
            opacity: .5;
          }

          .lyric-wrapper {
            position: absolute;
            right: 0px;
            top: 0;
            z-index: 4;
            margin-top: 15px;
            height: 219px;
            width: 420px;
            overflow-y: auto;

            &::-webkit-scrollbar {
              width: 8px;
              height: 8px;
            }

            &::-webkit-scrollbar-thumb {
              background-color: #868686;
              border-radius: 15px;
            }

            .lyric {
              position: absolute;
              right: 40px;
              width: 354px;
              height: 219px;
              //overflow: hidden;
              //overflow-y: scroll;
              // overflow: hidden;
              p {
                color: #989898;
                word-wrap: break-word;
                text-align: center;
                line-height: 32px;
                height: auto !important;
                min-height: 32px;
                transition: color 0.7s linear;
                /* -webkit-transition: color 0.7s linear; */
                -moz-transition: color 0.7s linear;
                -o-transition: color 0.7s linear;
              }

              .active {
                color: #fff;
                font-size: 14px;
              }
            }
          }
        }
      }

    }

    .wrap {
      position: absolute;
      left: 50%;
      top: 6px;
      z-index: 15;
      width: 980px;
      height: 47px;
      margin: 0 auto;

      .btns {
        width: 137px;
        padding: 6px 0 0 0;
        float: left;

        a {
          display: block;
          float: left;
          width: 28px;
          height: 28px;
          margin-right: 8px;
          margin-top: 5px;
          text-indent: -9999px;
          background-image: url("../../assets/playbar.png");

        }

        .pre {
          background-position: 0 -130px;

          &:hover {
            background-position: -30px -130px;
            cursor: pointer;
          }
        }

        .play {
          width: 36px;
          height: 36px;
          margin-top: 0;
          background-position: 0 -204px;

          &:hover {
            background-position: -40px -204px;
            cursor: pointer;
          }

        }

        .pause {
          width: 36px;
          height: 36px;
          margin-top: 0;
          background-position: 0 -165px;

          &:hover {
            background-position: -40px -165px;
            cursor: pointer;
          }
        }

        .nex {
          background-position: -80px -130px;

          &:hover {
            background-position: -110px -130px;
            cursor: pointer;
          }
        }
      }

      .head {
        position: relative;
        margin: 6px 15px 0 0;
        float: left;
        width: 34px;
        height: 34px;

        img {
          width: 34px;
          height: 34px;
        }

        .mask {
          position: absolute;
          top: 0px;
          left: 0px;
          display: block;
          width: 34px;
          height: 35px;
          background-position: 0 -80px;
          background-image: url("../../assets/playbar.png");
        }
      }

      .play {
        width: 581px;
        float: left;
        position: relative;

        .words {
          height: 28px;
          overflow: hidden;
          color: #e8e8e8;
          text-shadow: 0 1px 0 #171717;
          line-height: 28px;

          .name {
            max-width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            color: #e8e8e8;
            float: left;

            moz-user-select: -moz-none;
            -moz-user-select: none;
            -o-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
          }

          .mv {
            width: 19px;
            height: 17px;
            display: inline-block;
            float: left;
            margin: 6px 0 0 3px;
            background-position: 0 -57px;
            background-image: url("../../assets/playbar.png");
          }

          .f-thide {
            max-width: 220px;
            margin-left: 15px;
            color: #9b9b9b;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            float: left;

            .singer {
              a {

                moz-user-select: -moz-none;
                -moz-user-select: none;
                -o-user-select: none;
                -khtml-user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
                user-select: none;
                color: #9b9b9b;
              }
            }

          }

          .src {
            float: left;
            width: 14px;
            height: 15px;
            margin: 7px 0 0 13px;
            background-position: -110px -103px;
            background-image: url("../../assets/playbar.png");
          }
        }

        .m-pbar {
          width: 466px;

          .barbg {
            height: 9px;
            width: 466px;
            position: relative;
            background-image: url("../../assets/statbar.png");
            background-position: right 0;

            .rdy {
              background-image: url("../../assets/playbar.png");
              height: 9px;
              background-position: right -30px;
            }

            .cur {
              max-width: 100%;
              position: absolute;
              top: 0;
              left: 0;
              width: 1%;
              height: 9px;
              background-image: url("../../assets/statbar.png");
              background-position: left -66px;

              .f-tbn {
                position: absolute;
                top: -7px;
                right: -13px;
                width: 22px;
                height: 24px;
                margin-left: -11px;
                //background-position: 0 -250px;
                background-image: url("../../assets/ply_btn.png");

                i {
                  visibility: hidden;
                  position: absolute;
                  left: 5px;
                  top: 5px;
                  width: 12px;
                  height: 12px;
                  display: inline-block;
                  background-image: url("../../assets/loading.gif");
                }
              }
            }
          }

          .time {
            position: absolute;
            top: 25px;
            right: 33px;
            color: #797979;
            text-shadow: 0 1px 0 #121212;

            moz-user-select: -moz-none;
            -moz-user-select: none;
            -o-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;

            em {
              font-style: normal;
              text-align: left;
              font-size: inherit;
              color: #a1a1a1;
            }
          }
        }
      }

      .oper {
        width: 87px;
        float: left;

        .icn {
          float: left;
          width: 25px;
          height: 25px;
          margin: 11px 2px 0 0;
          text-indent: -9999px;
          background-image: url("../../assets/playbar.png");
        }

        .icn-cp {
          position: relative;
          background-image: url("../../assets/icn-pip.png");
        }

        .like {
          background-position: -88px -163px;
        }

        .share {
          background-position: -114px -163px;
        }
      }

      .ctrl {
        position: relative;
        z-index: 10;
        float: left;
        background-repeat: no-repeat;
        width: 113px;
        padding-left: 13px;
        background-position: -147px -238px;
        background-image: url("../../assets/playbar.png");

        .m-mol {

          position: absolute;
          top: -113px;
          left: 9px;
          clear: both;
          width: 32px;
          height: 113px;

          .barbg {
            position: absolute;
            top: 0;
            left: 0;
            width: 32px;
            height: 113px;
            background-position: 0 -503px;
            background-image: url("../../assets/playbar.png");
          }

          .bvg {
            padding: 4px 0;
            top: 7px;
            position: absolute;
            top: 11px;
            left: 14px;
            width: 4px;
            height: 93px;

            .curr {
              top: auto;
              width: 4px;
              bottom: 4px;

              left: 0;
              position: absolute;
              background-position: -40px bottom;
              overflow: hidden;
              background-image: url("../../assets/playbar.png");
            }

            .f-apha {
              position: absolute;
              top: 0;
              left: -7.5px;
              display: block;
              width: 18px;
              height: 20px;
              _background-position: 0 0;
              cursor: pointer;
              background-image: url("../../assets/vol_btn.png");
            }
          }
        }

        .icn-vol {
          background-position: -2px -248px;
          float: left;
          width: 25px;
          height: 25px;
          margin: 11px 2px 0 0;
          text-indent: -9999px;
          background-image: url("../../assets/playbar.png");

          &:hover {
            background-position: -31px -248px;
            cursor: pointer;
          }
        }

        .loop1 {
          background-position: -3px -344px;

          &:hover {
            background-position: -33px -344px;
          }
        }

        .loop2 {
          background-position: -66px -248px;

          &:hover {
            background-position: -93px -248px;
          }
        }

        .loop3 {
          background-position: -66px -344px;

          &:hover {
            background-position: -93px -344px;
          }
        }

        .icn-loop {
          //background-position: -3px -344px;
          float: left;
          width: 25px;
          height: 25px;
          margin: 11px 2px 0 0;
          text-indent: -9999px;
          background-image: url("../../assets/playbar.png");

        }

        .add {
          float: left;
          width: 59px;
          height: 36px;
          position: relative;
          zoom: 1;

          .tip {
            position: absolute;
            top: -51px;
            left: -65px;
            clear: both;
            width: 152px;
            height: 49px;
            background-position: 0 -287px;
            text-align: center;
            color: #fff;
            background-image: url("../../assets/playbar.png");

            line-height: 37px;
          }

          .icn-list {
            display: block;
            float: none;
            width: 38px;
            padding-left: 21px;
            background-position: -42px -68px;
            line-height: 27px;
            text-align: center;
            color: #666;
            text-shadow: 0 1px 0 #080707;
            text-indent: 0;
            text-decoration: none;
            height: 25px;
            margin: 11px 2px 0 0;
            background-image: url("../../assets/playbar.png");

            &:hover {
              background-position: -42px -98px;
              cursor: pointer;
            }
          }
        }

        .tip-1 {
          top: -35px;
          left: 12px;
          width: 81px;
          height: 39px;
          line-height: 34px;
          background-position: 0 -457px;
          position: absolute;
          top: -51px;
          left: -65px;
          clear: both;
          width: 152px;
          height: 49px;
          background-position: 0 -287px;
          text-align: center;
          color: #fff;
          line-height: 37px;
          background-image: url("../../assets/playbar.png");

        }
      }
    }
  }
}
</style>
